<template>
    <div class="lrcContainer" ref="LRC">
      <div class="lrc" >
<!--        <p v-if="currentTimeData>musicIndex[index]&&currentTimeData<musicIndex[index+1]" v-for=" (ele,name,index) in dataArr" >{{ele}}</p>-->
        <p  class="lrc-p" :class="{active:currentTimeData>musicIndex[index]&&currentTimeData<musicIndex[index+1]}" v-for=" (ele,name,index) in dataArr" >{{ele}}{{lrcTop(index)}}</p>
      </div>
    </div>
</template>

<script>
  import api from "../../api/base";
    export default {
        name: "Lrc",
      data(){
          return{
            dataArr:[],
            musicIndex:[]
          }
      },
      props:{
          musicSongid:{
            type:[String,Number],
            interval:true
          },
        durationTime:{
            type: Number,
          default:0
        },
        currentTimeData:{
          type: Number,
          default:0
        }
      },
      mounted(){
        api.getMusicList({
          method:'baidu.ting.song.lry',
          songid:this.musicSongid
        })
        .then(res=>{
          // console.log(res.data.lrcContent);
          let resData = res.data.lrcContent.split('\n');
          let zhengze = /\[\d*:\d*(\.|:)\d*]/g;
          let dataArr = {};


          for (let i = 0;i<resData.length;i++){
            if (resData[i].match(zhengze)){
              if (resData[i].replace(resData[i].match(/\[\S*]/g),'').length>1) {
                let timeDataMin = parseInt(resData[i].match(zhengze)[0].match(/\[\d*/i)[0].slice(1));
                let timeDataS = parseInt(resData[i].match(zhengze)[0].match(/:\d*/i)[0].slice(1));

                // console.log(timeDataMin,timeDataS);
               let  zong = timeDataMin*60+timeDataS;
                // console.log(zong);

                dataArr[zong] = resData[i].replace(resData[i].match(zhengze), '');

              }
            }else {
              continue
              /*if (resData[i].replace(resData[i].match(/\[\S*]/g),'').length>1){
                dataArr.push(resData[i].replace(resData[i].match(/\[\S*]/g),''));*/
              // }
            }
          }
          // console.log(dataArr);
          this.dataArr = dataArr;
          // console.log(this.dataArr);

          for (let key in dataArr){
            this.musicIndex.push(key);
          }
          // console.log(this.musicIndex)
        })
      },
      methods: {
          lrcTop(index){
            if (this.currentTimeData>this.musicIndex[index]&&this.currentTimeData<this.musicIndex[index+1]){
              this.$refs.LRC.scrollTop = 30*(index-2);
              // console.log( 30*(index-2))
              // console.log(this.$refs.LRC.scrollTop)
            }

          }
      }

    }
</script>

<style scoped>
  .active {
    color: red;
  }
  .lrcContainer {
    width: 100%;
    height: 150px;
    overflow: scroll;
    position: relative;
  }

  .lrc {
    width: 100%;
    position: absolute;
    top: 0;
  }

  .lrc-p {
    height: 30px;
    line-height: 30px;
  }

  .up30 {
    margin-top: -30px;
  }
</style>
